<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*直接获得节点对象方式*/
			function demo1(){
				//id方式直接获取        单个对象
			var username = window.document.getElementById("username");
			alert(username);
			}
			function demo2(){
				//通过标签名称获得元素   返回的是集合
				var inp=document.getElementsByTagName("input");
				//alert(inp.length);
				alert(inp[2]);//指定一个
			}
			function demo3(){
				//通过name属性获得
				var inp = document.getElementsByName("hobby");
				alert(inp.length);
			}
			
			/*间接获得对象的方式*/
			function demo4(){
				//获得父节点
				var professional = document.getElementById("professional");
				//再获得子节点   childNodes
				var child = professional.childNodes;
				//alert(child.length);//9   空白文档也是子节点 ，所以是9个，不是4个
				console.log(child);
			}
			function demo5(){
				//获得子节点
				var p2 = document.getElementById("p2");
				//从子节点获得父节点
				var parent = p2.parentNode;
				console.log(parent);
			}
			function demo6(){
				var p2=document.getElementById("p2");
				//获得下一个节点      因为先是空白节点才到下一个元素，所以这里是空得text
				//var next = p2.nextSibling;
				//获得下一节点元素
				//var next = p2.nextSibling.nextSibling;
				//直接获得下一节点,不包含空白文档
				var next = p2.nextElementSibling;
				console.log(next);
				//获得上一个节点,含有空白文档
				//var up = p2.previousSibling.previousSibling;
				//直接获得上一节点,不包含空白文档
				var up = p2.previousElementSibling;
				console.log(up);
			}
		</script>
	</head>
	<body onload="demo6()">
		<form action="" id=forml>
			用户名：<input type="text" name="username" id="username" value="" placeholder="请输入姓名"  autofocus="autofocus"/><br/>
			密码：<input type="password" name="pwd" id="pwd" value="" /><br />
			爱好：<input type="checkbox" name="hobby" id="" value="music" />音乐
				<input type="checkbox" name="hobby" id="" value="sports" />体育
				<input type="checkbox" name="hobby" id="" value="art" />美术<br />
			职业： <select name="professional" id="professional">
				<option value="1">工人</option>
				<option value="2" id="p2">农民</option>
				<option value="3">解放军</option>
				<option value="4">知识分子</option>
			</select><br />
			
			<input type="button" id="" value="提交" />
		</form>
	</body>
</html>
